<template>
  <div class="scan_code">
    <el-form @submit.native.prevent style="font-size: 0" v-if="showInput">
      <el-input
        size="small"
        ref="codeInput"
        clearable
        :placeholder="codePlaceholder"
        v-bind="$attrs"
        v-model.trim="codeValue">
        <template slot="prepend">
          <el-button
            @click="handleCollapse"
            size="small">
            <i class="iconfont icon-saoma"></i>
            <span>扫码</span>
          </el-button>
        </template>
        <template slot="append">
          <el-button
            size="small"
            native-type="submit"
            @click="handleCodeScan"
            type="primary">确定
          </el-button>
        </template>
      </el-input>
    </el-form>
    <div class="mes_btn" v-else>
      <el-button
        size="small"
        type="primary"
        plain
        @click="handleExpand"
      >
        <i class="iconfont icon-saoma"></i>
        <span>扫码</span>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CodeScan',
  props: {
    codePlaceholder: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      // 扫码输入框的值
      codeValue: '',
      // 是否显示input
      showInput: false,
    }
  },
  methods: {
    handleCodeScan() {
      this.$emit('codeSubmit', this.codeValue)
    },
    handleExpand() {
      this.showInput = true
      this.$nextTick(() => {
        this.$refs.codeInput.focus()
      })
    },
    handleCollapse() {
      this.showInput = false
    }
  }
}
</script>

<style lang="less">
  .button-instance-mixin(@fc,@bc) {
    color: @fc;
    background-color: @bc;
    border-color: @bc;
    &:hover {
      background-color: darken(@bc, 5%);
      color: @fc;
    }
    &:active {
      background-color: darken(@bc, 10%);
      color: @fc;
    }
    &:focus {
      color: @fc;
      background-color: @bc;
    }
  }

  /*保持最高优先级添加.scan_code .el-form，并将其他样式放到.el-input-group中*/
  .scan_code .el-form{
    .el-input-group{
      width: 400px;
      .el-input__inner {
        border-color: @btnInfoBgC;
        font-size: 14px;
        padding-left: 5px;
        border-left: none;
      }
      .el-input-group__append, .el-input-group__prepend {
        overflow: hidden;
        border-radius: 2px;
        border-color: @btnInfoBgC;
      }
      .el-input-group__append {
        button.el-button.el-button--primary {
          .button-instance-mixin(@fc:@btnInfoFontC,@bc:@btnInfoBgC);
        }
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }
      .el-input-group__prepend {
        background-color: #fff;
        font-size: 14px;
        padding: 0 20px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        .el-button--small {
          margin-top: -4px;
          span {
            margin-left: -1px;
          }
        }
        .iconfont {
          font-size: 14px;
        }
      }
    }
  }
</style>
